// Hero feature
// ==========================

.usa-hero {
  @include border-box-sizing;
  @include typeset;
  @include u-padding-y($theme-site-margins-width);
  background-image: url("#{$theme-hero-image}");
  background-position: center;
  background-size: cover;
  color: color("white");
}

.usa-hero__callout {
  background-color: color("primary-darker");
  padding: units(4);

  @include at-media("tablet") {
    max-width: units("mobile");
  }
}

.usa-hero__heading {
  @include typeset-h2;
  color: color("accent-cool");
  line-height: line-height("heading", 2);
}

.usa-hero__heading--alt {
  color: color("white");
  display: block;
}
